<template>
  <div class="pagestyle">
    <list_controller
      ref="zujianname"
      :options="state.options"
      pageName="地点管理"
    >
      <template v-slot:opraCurdBtn1="row">
        <span>
          <!-- <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑
          </el-button> -->
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <el-button class="btn" type="primary" link @click="addBtn('mul')">
          <el-icon style="margin-right: 2px">
            <svg-icon
              class-name="search-icon"
              icon-class="addtotal"
            /> </el-icon
          >新增
        </el-button>
        <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
          <el-icon>
            <DeleteFilled /> </el-icon
          >删除
        </el-button>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="400"
        :height="auto"
        v-model="state.addModal"
        resize
        :mask="true"
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="安装地点" prop="address">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                                  <el-form-item label="措施内容" prop="measureContent">
                                      <el-input v-model="state.formData.measureContent" placeholder="请输入"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="措施等级" prop="measureRank">
                                      <el-select clearable filterable v-model="state.formData.measureRank"
                                          placeholder="请选择">
                                          <el-option v-for="item in state.stationInNumList" :key="item.code"
                                              :label="item.label" :value="item.code">
                                          </el-option>
                                      </el-select>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="是否默认" prop="preset">
                                      <el-select clearable filterable v-model="state.formData.preset"
                                          placeholder="请选择">
                                          <el-option v-for="item in state.presetList" :key="item.code" :label="item.label"
                                              :value="item.code">
                                          </el-option>
                                      </el-select>
                                  </el-form-item>
                              </el-col> -->
              </el-row>
            </el-form>
            <div class="form_footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { getlistAlarmTypesList } from "@/api/config";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
components: {
  list_controller;
}
const upload = ref(null);
let state = reactive({
  options: {
    isShowCaozuo: true,
    // tableheads: computed(() => table_headers.configMeasure),
    tableheads: computed(() => [
        {
            field:"address",
            show:1,
            sort: 0,
            title: "安装地点",
            width: null,
        }
    ]),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "address",
          title: "安装地点",
          type: "input",
          binddata: "",
        },
      ],
    },
    dataUrl: "/gas/base/install-place/query",
    delUrl: "/gas/base/install-place/delete",
    addUrl: "/gas/base/install-place/save",
    // descUrl: "/measure/search",
    // editUrl: "/measure/update",
  },
  // 表单
  addModal: false,
  modalTitle: "新增地点",
  drawerShow: false,
  formRef: null,
  formData: {},
  rules: {
    address: [
      {
        required: true,
        message: "请输入安装地点",
        trigger: "blur",
      },
    ],
  },
  editId: undefined,
  stationInNumList: [
    {
      code: 1,
      label: "一般",
    },
    {
      code: 2,
      label: "重要",
    },
    {
      code: 3,
      label: "非常重要",
    },
  ],
  presetList: [
    {
      code: true,
      label: "是",
    },
    {
      code: false,
      label: "否",
    },
  ],
});

// 新增按钮
function addBtn(row) {
  state.modalTitle = "新增地点";
  state.addModal = true;
  state.formData = {};
  state.editId = undefined;
  state.fileList = [];
}
// 编辑按钮
function editBtn(row) {
  state.modalTitle = "编辑地点";
  state.addModal = true;
  state.formData = row;
  state.editId=row.id;
//   axios.post(state.options.descUrl, { id: row.id }).then((res) => {
//     if (res.code == 200) {
//       state.formData = res.data.list[0];
//       state.editId = res.data.list[0].id;
//     }
//   });
}

function deleteBtn(row) {
  console.log(row,'row')
  let delUrltype = state.options.delUrl;
  let ids = [];
  if (row != "mul") {
    ids = [row.placeId];
  } else {
    if (store.records.length > 0) {
      ids = store.records.map((item) => {
        return item.placeId;
      });
    } else {
      proxy.$modal.msgSuccess("请先勾选所要删除数据!");
    }
  }
  if (ids.length > 0) {
    ElMessageBox.confirm("确定要删除吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        axios.post(delUrltype, ids).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
            store.records = [];
          }
        });
      })
      .catch(() => {
        proxy.$modal.msgWarning("删除取消");
      });
    
  }
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (state.editId) {
        state.formData.id = state.editId;
        axios.post(state.options.editUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      } else {
        axios.post(state.options.addUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      }
    }
  });
}

function cancel() {
  state.addModal = false;
}

function getlistAlarmTypesData() {
  let arr = [];
  getlistAlarmTypesList().then((res) => {
    state.stationmodelList = res.data;
    state.stationmodelList.forEach((item) => {
      arr.push({
        value: item.id,
        label: item.alarmType,
      });
      state.options.queryList.querys[0].options = arr;
    });
  });
}

// getlistAlarmTypesData();
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>